<template>
  <div class="playmv">
    <!-- 布局 -->

    <video :src="mvUrl" controls></video>

    <div class="mv_detail">
      <div class="mv_name">{{ mvDetail.name }}</div>
      <div class="mv_info">
        <p>{{ mvDetail.artistName }}上传</p>
        <p>{{ mvDetail.playCount }}万次播放 {{ mvDetail.publishTime }}</p>
      </div>
    </div>

    <!-- 相关视频 -->
    <div class="related_mv">
      <p>相关视频</p>
      <ul class="related">
        <li
          class="related-item"
          v-for="item in allVideo"
          :key="item.vid"
          @click="reGet(item.vid)"
        >
          <img :src="item.coverUrl" alt="" />
          <div>
            <p class="related__name">{{ item.title }}</p>
            <p class="related__author">xxxxx</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="foot">
      <button>分享给好友</button>
    </div>
  </div>
</template>

<script>
import { getMvUrl, playDetail, relatedMv } from "@/http/api/playmv.js";
export default {
  data() {
    return {
      mvUrl: "",
      mvDetail: {},
      allVideo: [],
    };
  },
  created() {
    //(1)获取路由参数
    // console.log(this.$route.query);
    //(2)发送请求
    this.init(this.$route.query.id);
  },
  methods: {
    init(id) {
      this.getmv(id);
      this.getPlayD(id);
      this.getrelatedMV(id);
    },
    getmv(id) {
      //获取mv地址
      getMvUrl("/mv/url", { id }).then((res) => {
        this.mvUrl = res.data.url;
        console.log(res.data.url);
      });
    },
    getPlayD(id) {
      playDetail("/mv/detail", { mvid: id }).then((res) => {
        this.mvDetail = res.data;
        // this.mvDetail = res.data;
      });
    },
    //相关视频
    getrelatedMV(id) {
      relatedMv("/related/allvideo", { id }).then((res) => {
        this.allVideo = res.data;
      });
    },
    clearStates() {
      this.mvUrl = "";
      this.mvDetail = {};
      this.allVideo = [];
    },
    reGet(id) {
      this.clearStates();
      this.getrelatedVideD(id);
      this.getRv(id);
      this.getrelatedMV(id);
    },
    getrelatedVideD(id) {
      playDetail("/video/detail", { id: id }).then((res) => {
        this.mvDetail.name = res.data.title;
        this.mvDetail.artistName = res.data.creator.nickname;
        this.mvDetail.publishTime = +new Date(res.data.publishTime);
      });
    },
    getRv(id) {
      playDetail("/video/url", { id: id }).then((res) => {
        const [{ url }] = res.urls;
        this.mvUrl = url;
      });
    },
  },
};
</script>

<style scoped lang="less">
.playmv {
  position: relative;
  padding: 31.6vh 0 4rem;
  height: 100vh;
  overflow: hidden scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  video {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 31.6vh;
    background-color: #fff;
  }

  .mv_detail {
    padding: 1.125rem;
    .mv_name {
      font-size: 1.12rem;
      color: #333;
      margin-bottom: 0.5rem;
    }
    .mv_info {
      font-size: 0.875rem;
      color: #666;
    }
  }

  .related_mv {
    padding: 0 1.125rem;
    > p {
      font-size: 1.12rem;
      color: #333;
      margin-bottom: 0.5rem;
    }
    .related {
      &-item {
        display: flex;
        margin-top: 0.5rem;
        img {
          width: 7rem;
          border-radius: 0.5rem;
          margin-right: 0.5rem;
        }
        > div {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
      &__name {
        font-size: 0.9rem;
        color: #333;
      }
      &__author {
        font-size: 0.875rem;
        color: #666;
      }
    }
  }

  .foot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0.5rem 0;
    background-color: #fff;
    button {
      width: 60%;
      height: 3rem;
      line-height: 3rem;
      background-color: rgb(34, 213, 156);
      color: #fff;
      border-radius: 1.5rem;
    }
  }
}
</style>